<template>
  <div id="app-updater">
    <div class="one-block-1">
      <span>
        1. 自动更新
      </span>
    </div>
    <div class="one-block-2">
      <a-space>
        <a-button @click="checkForUpdater()">检查更新</a-button>
        <a-button @click="download()">下载并安装</a-button>
      </a-space>
    </div>
    <div class="one-block-1">
      <span>
        2. 下载进度
      </span>
    </div>
    <div class="one-block-2">
      <a-progress :percent="percentNumber" status="active" />
      <a-space>
        {{ progress }}
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { ipc } from '@/utils/ipcRenderer';
import { ipcApiRoute, specialIpcRoute } from '@/api';
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';

const status = ref(0);
const progress = ref('');
const percentNumber = ref(0);

onMounted(() => {
  init()
})

/**
 * 初始化应用程序更新器的IPC通信
 * 此函数首先移除所有与应用更新器相关的IPC路由的现有监听器，然后添加一个新的监听器
 * 用于处理应用更新状态的变化当接收到更新状态时，它会解析接收到的结果，并根据状态更新
 * 应用的更新进度或显示相关信息
 */
function init() {
  // 移除所有与应用更新器相关的IPC路由的现有监听器，以防止重复监听
  ipc.removeAllListeners(specialIpcRoute.appUpdater);

  // 监听应用更新器的IPC路由
  ipc.on(specialIpcRoute.appUpdater, (event, result) => {
    // 解析从IPC接收到的结果
    result = JSON.parse(result);
    // 更新状态值
    status.value = result.status;

    // 如果状态为3，表示更新正在进行中，更新进度和百分比信息
    if (result.status === 3) {
      progress.value = result.desc;
      percentNumber.value = result.percentNumber;
    } else {
      // 否则，显示一个信息提示，通知用户更新结果
      message.info(result.desc);
    }
  });
}


function checkForUpdater () {
  ipc.invoke(ipcApiRoute.framework.checkForUpdater).then(r => {
    console.log(r);
  })
}

function download () {
  if (status.value !== 1) {
    message.info('没有可用版本');
    return
  }
  ipc.invoke(ipcApiRoute.framework.downloadApp).then(r => {
    console.log(r);
  })
}
</script>
<style lang="less" scoped>
#app-updater {
  padding: 0 10px;
  text-align: left;
  width: 100%;
  .one-block-1 {
    font-size: 16px;
    padding-top: 10px;
  }
  .one-block-2 {
    padding-top: 10px;
  }
}
</style>
